<template>
    <div class="title" :style="{ 
                'padding-top': facade.margin + 'px',
                'padding-bottom': facade.margin + 'px',
                'backgroundColor': facade.background_color
            }">
        <div class="title-style1" v-if="content.style == 1" :style="{color: facade.title_color}">
            <div class="title-content">
                {{content.title}}
            </div>
        </div>
        <div class="title-style2" v-if="content.style == 2" :style="{color: facade.title_color}">
            <div class="title-content">
                {{content.title}}
            </div>
            <div class="title-decorate">◇</div>
        </div>
        <div class="title-style3" v-if="content.style == 3">
            <div class="title-content" :style="{
                'color': facade.title_color,
                'font-size': facade.title_font_size+'px'
            }">
                {{content.title}}
            </div>
            <div class="title-more" :style="{
                'color': facade.more_color
            }" v-if="content.is_more">
                {{content.moretitle}} <i class="le-icon le-icon-arrow-right"></i>
            </div>
            <div class="title-subtitle" :style="{
                'color': facade.subtitle_color,
                'font-size': facade.subtitle_font_size+'px'
            }">
                {{content.subtitle}}
            </div>
        </div>
    </div>
</template>
<script type="text/javascript">
export default {
    props: {
        facade: {
            type: [Object, Array]
        },
        content: {
            type: [Object, Array]
        }
    }
};
</script>
<style lang="less" scoped>
@import './element.less';
</style>